<template>
  <div class="eq_tbhd_txf_03 ellipsis">
    <el-image
        v-if="marketIcon"
        :src="marketIcon"
        :alt="marketPrefix"
        :lazy="true"
        style="height: 12px; margin-right: 4px;"
        fit="contain"
    />
    {{ stockSymbol }}
  </div>
</template>

<script>
export default {
  name: 'StockCodeFlag',
  props: {
    stockCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      marketIcon: ''
    }
  },
  computed: {
    marketPrefix() {
      return this.stockCode?.split('.')[0] || ''
    },
    stockSymbol() {
      return this.stockCode?.split('.')[1] || ''
    },
    marketList() {
      return this.hashmap.marketList
    }
  },
  watch: {
    stockCode: {
      immediate: true,
      handler() {
        const match = this.findJsonByKeyValue(this.marketList, 'value', this.marketPrefix)
        this.marketIcon = match ? match.icon : ''
      }
    }
  }
}

</script>
